<template>
  <div class="area_pop">
    <div class="title rel">
      {{ $t("page.doc5") }}
      <div class="abs" @click="onAreaClose">
        <van-icon name="cross" />
      </div>
    </div>
    <div class="so db">
      <div class="ico"></div>
      <div class="flexs">
        <input type="text" :placeholder="$t('page.doc6')" v-model="soAreaId" />
      </div>
      <div class="closes" v-if="soAreaId != ''" @click="soAreaId = ''">
        <img src="../assets/images/ico_close.png" alt="" />
      </div>
    </div>
    <ul>
      <li
        class="db"
        v-for="(item, k) in searchResult"
        :key="k"
        @click="areaSet(item)"
      >
        <div class="ico">
          <img :src="item.iconUrl" alt="" />
        </div>
        <div class="flexs txt">{{ item.name }}（+{{ item.mobilePrefix }}）</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  computed: {
    searchResult() {
      if (this.soAreaId != "") {
        return this.areaData.filter(
          (item) => item.mobilePrefix.indexOf(this.soAreaId) > -1
        );
      } else {
        return this.areaData;
      }
    },
  },
  watch: {
    soAreaId: {
      immediate: true, //在框的值还没变化时执行如下函数显示出所有的情况
      handler(val) {
        this.code_data = this.areaData.filter((p) => {
          return p.mobilePrefix.indexOf(val) !== -1;
        });
      },
    },
  },
  data() {
    return {
      areaData: [],
      soAreaId: "",
    };
  },
  props: {
    isName: {
      default: true,
    },
    isLang: {
      default: true,
    },
  },
  created() {},
  mounted() {
    this.getArea();
  },

  methods: {
    getArea() {
      this.$post(this.URL.user.country_list, {}).then((res) => {
        if (res.code == 0) {
          this.areaData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    areaSet(item) {
      this.$emit("areaSet", item);
    },
    onAreaClose() {
      this.$emit("onAreaClose");
    },
  },
};
</script>
<style lang="less" scoped>
.close {
  padding: 0.2rem 0;
  img {
    height: 0.32rem;
  }
}
.head {
  padding: 0.2rem 0;
  .flex {
    align-items: center;
    position: relative;
  }
  .myName {
    margin-right: 0.2rem;
    img {
      height: 0.56rem;
      border-radius: 0.56rem;
      width: 0.56rem;
    }
  }
  .name {
    font-weight: 700;
    font-size: 0.32rem;
    text-align: center;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 4rem;
    margin-left: -2rem;
    left: 50%;
  }
  .lang {
    img {
      height: 0.4rem;
    }
  }
  .notice {
    position: relative;
    margin-right: 0.32rem;

    img {
      height: 0.4rem;
    }
    span {
      position: absolute;
      background: #b6d944;
      color: #fff;
      border-radius: 50%;
      font-size: 0.2rem;
      padding: 0 0.08rem;
      top: -0.1rem;
      right: -0.1rem;
    }
  }

  .back {
    img {
      height: 0.48rem;
    }
  }
}
</style>
